<%--
  Created by IntelliJ IDEA.
  User: Ssw
  Date: 2018-10-11
  Time: 20:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/js/bootstrap.css">
    <link rel="stylesheet" href="/js/bootstrap.min.css">
    <style>
        body{
            width: 1325px;
            height:50%;
            overflow: auto;
        }
        *{
            font-family: 楷体;
        }
.table{

    text-align: center;
}
#exlist{
    width: auto;
    height:500px;
    border:1px solid black;
 }
.fenye{

    width: 500px;
    border: 0px solid black;
    height: auto;
    text-align: center;
    position: absolute;
    left: 350px;
    top:500px;
    /*margin-top: 350px;
    margin-left: 350px;*/
}


    </style>
</head>
<body>

<%--<form id="sss">
     <input  v-model="test">
    <input  v-model="test2">
     <input type="button" @click="ko()">
</form>---%>

<div id="showhide">
    <ul class="breadcrumb">
        <li><a v-on:click = "bianse1()"  v-bind:style = "styleobj">
            <span class="glyphicon glyphicon-search" style="margin-left: 20px;"></span>查询</a></li>
        <li><a href="/jsp/addorders.jsp" v-bind:style = "styleobj2">
            <span class="glyphicon glyphicon-plus" style="margin-left: 20px;"></span>增加订单</a></li>
    </ul>
 <div v-show ="show">
     <form class="form-inline" role="form">
         <div class="input-group input-group-lg">
             <input type="text" ref="testval" class="form-control" style="width: 300px;margin-left: 20px;" @keyup="sele()"  placeholder="请输入开发单号">
         </div>
     </form>
 </div>



</div>
<table class="table table-striped table-bordered table-hover table-condensed test">
     <tr>
         <td>      </td>
         <td>开发单号</td>
         <td>客户</td>
         <td>款式</td>
         <td>款号</td>
         <td>款名</td>
         <td>季度</td>
         <td>版型</td>
         <td>件数</td>
         <td>样板费</td>
         <td>接单日期</td>
         <td>版期</td>
     </tr>

   <tbody id="exlist">
     <tr v-for="ex in lists">
         <td>      </td>
         <td>{{ex.eorcode}}</td>
         <td>{{ex.clname}}</td>
         <td>{{ex.desname}}</td>
         <td>{{ex.haoname}}</td>
         <td>{{ex.deskuaname}}</td>
         <td>{{ex.seaname}}</td>
         <td>{{ex.planame}}</td>
         <td>{{ex.eornum}}</td>
         <td>{{ex.eormoney}}</td>
         <td>{{ex.eordate}}</td>
         <td>{{ex.eoretc}}</td>
     </tr>
   </tbody>
</table>

<div id="fanye">
    <ul class="pagination  pagination-lg fenye">
        <li><a @click="shang(1,1)">上一页</a></li>
        <li><a>{{CurrPage}}/{{MaxPage}}</a></li>
        <li><a  @click="xia(1,1)">下一页</a></li>
        <li><a><input  v-model="zzz"  style="width:70px;height: 20px; font-size: 15px;" ref="vals"
                       onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"/>/{{MaxPage}}</a></li>
        <li><a  @click="fan(1,1)">跳转</a></li>

    </ul>
</div>


</body>
</html>
<script src="/js/vue-resource.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.min.js"></script>

<script>
/*var sss=new Vue({
    el:'#sss',
    data:{
     test:"",
        test2:""
    },
    methods:{
        ko:function(){
            alert(this.test2);
        }
    }
})*/
//显示隐藏
var showhide = new Vue({
    el: '#showhide',
    data: {
        show:false,
        show2:false,
        testval:'',

        styleobj :{
            fontSize:'15px',
            color:'#545658'//
        },
        styleobj2 :{
            fontSize:'15px',
            color:'#545658'//
        },
    },
    methods : {
        bianse1:function(){
            this.show=!this.show;
            this.show2=false;
            if (this.styleobj.color=='red'){

                this.styleobj.color='#545658';
                this.styleobj2.color='#545658'

            }else{
                this.styleobj.color='red';
                this.styleobj2.color='#545658'
            }
        },
        bianse2:function(){
            this.show2=!this.show2;
            this.show=false;
            if (this.styleobj2.color=='red'){

                this.styleobj2.color='#545658';
                this.styleobj.color='#545658'
            }else{
                this.styleobj2.color='red';
                this.styleobj.color='#545658'
            }
        },
        sele:function(){

            load.fenye(shang.CurrPage,this.$refs.testval.value);
        }
    }
});
//
    $(function(){
        load.fenye(1,"k");
    })
    Vue.use(VueResource);
    var load=new Vue({
       el:'#exlist',
        data: {
            lists:"" , //数据，名称自定
        },
        methods:{
            fenye: function (PageNum,danhao){
                var url = "/exp/seexpl"; //   前面要加/
                this.$http.post(url,{danhao:danhao,PageNum:PageNum},{emulateJSON:true}).then(function (data) {//ajax请求封装
                    shang.CurrPage= data.body.pageNum;
                    shang.zzz= data.body.pageNum;
                    shang.MaxPage=data.body.pages;
                    this.lists=data.body.list;
                }, function(a){   //返回失败方法调用，暂不处理
                })}
            }
    })
    //
    var shang=new Vue({
        el:'#fanye',
        data:{
            CurrPage:"",//当前页
            MaxPage:"",//最大页数
            vals:"",
            zzz:""


        },
        methods:{
            fan:function(PageNum,danhao){

                if (this.$refs.vals.value==null){
                    this.$refs.vals.value=this.CurrPage;
                }
                if (this.$refs.vals.value==""){
                    this.$refs.vals.value=this.CurrPage;
                }
                if(this.$refs.vals.value>this.MaxPage){
                    this.$refs.vals.value=this.MaxPage;

                }
                //alert(this.$refs.vals.value);
               load.fenye(this.$refs.vals.value,showhide.$refs.testval.value);

            },shang:function(PageNum,danhao){
                if (this.CurrPage-PageNum==0){
                    PageNum=1;

                }else{
                    PageNum=this.CurrPage-PageNum;
                }

                load.fenye(PageNum, showhide.$refs.testval.value);

            },xia:function(PageNum,danhao){
                if (this.CurrPage+PageNum>this.MaxPage){
                    PageNum=this.CurrPage;
                }else{
                    PageNum=this.CurrPage+PageNum;
                }

               // showhide.$refs.testval.value
                load.fenye(PageNum,showhide.$refs.testval.value);

            }
        }
    })


</script>
